<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
    
<script>
/* // ES5 类与继承
function Cat(n,c){// 父类
    this.name = n;
    this.color = c;
}
Cat.say = function (){// 静态方法
    console.log( '喵喵~' );
}
Cat.abc = 123;// 静态属性
Cat.prototype.type = 'animal';
Cat.prototype.skill = function (){
    console.log( '抓老鼠' );
}

// 需求：Dog的实例也要有name和color属性，也要能抓老鼠

function Dog(f,n,c){// 子类
    this.food = f;
    Cat.call(this,n,c);// 构造函数继承
}
// 原型继承
// Dog.prototype = Cat.prototype;
// Dog.prototype = new Cat();
Dog.prototype = Object.create(Cat.prototype);

let dog1 = new Dog('shi','大黄','yellow');
console.log( dog1.food );
console.log( dog1.name );
console.log( dog1.type );
dog1.skill(); */


// ES6 类与继承
// JS中没有类，ES6引入了class的概念
// class是一种语法糖
// class是一个关键字，用于定义一个'类'

class Cat{// 父类
    constructor(n,c){// 构造器
        this.name = n;
        this.color = c;
        // this.type = 'animal';// 实例对象自身的属性
    }
    type = 'animal';// 实例对象自身的属性
    skill(){// 原型上的方法
        console.log( '抓老鼠' );
    }
    static say(){// 静态方法(类的方法)
        console.log( '喵喵' );
    }
    static abc = 123;// 静态属性(类的属性)
}
Cat.prototype.type = 'animal';// 原型上的属性

// Dog extends Cat 表示Dog继承Cat
class Dog extends Cat{// 子类
    constructor(f,n,c){// 构造器
        // 注意：
        // 1.在子类的构造器函数中，必须先调用super方法，否则使用this关键字时会报错
        // 2.必须先调用super方法，子类的构造器函数中才能使用this
        super(n,c);// Cat.call(this,n,c);构造函数继承

        // console.log( super );// 报错
        console.log( super.type );// 'animal'
        // console.log( super.name );// undefined
        // console.log( super.food );// undefined
        // super.skill();// 抓老鼠

        this.food = f;
    }
}
let dog1 = new Dog('翔','黑子','black');
// console.log( dog1 );// Dog {type: 'animal', name: '黑子', color: 'black', food: '翔'}
// console.log( dog1.food );
// console.log( dog1.name );
// console.log( dog1.color );
// dog1.skill();
// // dog1.say();// 报错，不能访问静态方法
// Cat.say();// '喵喵'
// console.log( Cat.abc );// 123


</script>
</body>
</html>